﻿ <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>开始朗读</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/style2/d_common.css">
<link rel="stylesheet" href="css/style2/common1.css">

<script type="text/javascript">

/* timeout2();
  function timeout2(){
	  alert("暂停1");
	  document.getElementById('marquee').stop();
	  alert("暂停2");
	  setTimeout(function() {
			scroll();
		}, 2000); 
  } */
/*   function scroll(){
		document.getElementById('marquee').start();
	} */
</script>
</head>
<body>
	<div id="back">
		<div class="header">
			<div class="logo">
				<a href="javascript:void(0);"><img src="img/n_logo.png" alt="">&nbsp;
				</a>
			</div>
			<div class="user">
				<img
					src="${user.pic==null?'img/man.png':user.pic==''?'img/man.png':user.pic }"
					alt="">
				<div class="admin">
					<span class="name">${user.name }</span><span class="number">【${user.cardno }】</span>
				</div>
				<a class="tuichu" href="declaimer/endread?devicecode=${devicecode}&guid=${user.guid}" style="background:#25c0f6;display: inline-block;padding: 5px;height: 30px;line-height: 30px;border-radius:5px;width: 80px;text-align: center;">退出</a>
			</div>
		</div>
		<!--end header-->
		<div class="main main-read">
			<div class="part-noVideo ">
				<div class="time fl" style="position: absolute;color: #fff;z-index: 1;background: #0303037a;">
					<p><span id="minute">00</span>:<span id="second">00</span></p>
				</div>
				<div class="type pictype">
					<img src="css/style2/img/literature.png" alt=""><br> <span>朗读素材</span>
				</div>
				<div class="video part-Video hide">
					<div id="vd"></div>
				</div>
				<div class="artical">
					<div class="articalTitle">
						<p>${material.title }</p>
					</div>
					<div class="articalMain">
						<marquee id="marquee" direction="up" 
							  scrollamount="2" height='300px' onmouseover="this.stop();"
							onmouseout="this.start();" loop="-1">
							<h3 style="color:#000;">${material.title }</h3>
							<p style="color:#000;">${material.content }</p>
							<h3 style="color:#000;">${material.title }</h3>
							<p style="color:#000;">${material.content }</p>
						</marquee>
							
					</div>
					<div style="text-align: center;padding-top: 3px;">
					<a style="font-size:24px;position:relative;right:0;width: 130px;padding-left: 30px;
					background: url(css/style2/img/re-select.png) 8px 14px no-repeat;" 
					href="declaimer/material?cardno=${user.cardno }&guid=${user.guid}&code=${material.materialtype }&devicecode=${devicecode}"
								class="speed-btn">重选素材</a>
					<a style="position:relative;right:0;" href="javaScript:;" onclick="changeSpeed(-1);" class="speed-btn reduce-btn"></a>
					<a style="position:relative;right:0;" href="javaScript:;" onclick="stopbtn(this)" class="speed-btn stop-btn"></a>
					<a style="position:relative;right:0;" href="javaScript:;" onclick="changeSpeed(1);"class="speed-btn add-btn"></a>
					</div>
				</div>
			</div>

			<div class="clear"></div>
			<div class="part-bottom">
				<div class="camera-direct fl">
					<p class="clear">
						<span class="camera-dir">摄像头方向：</span> 
						<!--<span
							class="words-speed fr">字幕速度：</span>-->
					</p>
					<div class="direct-btn">
						<div>
							<a href="javascript:changeSize('t1');" class="dir">上</a> 
							<a href="javascript:changeSize('t2');" class="dir">下</a> 
							<a href="javascript:changeSize('z1');" class="dir add-btn"></a> <a
								href="javascript:changeSize('z2');" class="dir reduce-btn"></a>
								
							</div>
						<div>
							<a href="javascript:changeSize('p2');" class="dir">左</a>
							<a href="javascript:changeSize('p1');" class="dir">右</a>
							<a style="width: 122px;padding-left: 30px;
							background: url(css/style2/img/qiehuanshijiao.png) 3px #ffc271 no-repeat;" href="javascript:changeVideo();" class="dir">视角切换</a> 
						</div>
					</div>
				</div>
				<div class="audio-play fr">
					<div id="player">
						<span>选择背景音乐：</span>
						<div class="ctrl">
							<div class="control clear">
								<div class="fl">
									<div class="rewind icon"></div>
									<div class="playback icon"></div>
									<div class="fastforward icon"></div>
								</div>
								<div class="volume fr">
									<div class="mute icon fl"></div>
									<div class="slider fr">
										<div class="pace"></div>
									</div>
								</div>
							</div>
							<div class="progress">
								<div class="slider">
									<div class="loaded"></div>
									<div class="pace"></div>
								</div>
								<div class="left" style="margin-top: 8px;"><span class="timer">0:00</span>
								<span class="alltime" style="float:right;font-size: 16px;color: #ccc;">0:00</span></div>
								<div class="right">
									<div class="repeat icon"></div>
									<div class="shuffle icon"></div>
								</div>
							</div>
						</div>
					</div>
					<ul id="playlist" class="fl"></ul>
				</div>
			</div>
			<div class="clear"></div>

		</div>
		<!--end back-->
	</div>
	<div class="footer">
		<div class="read-btn">
			<a  class="start-btn">开始</a> <a
				 class="over-btn">结束</a>
		</div>
	</div>
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/jwplayer.js"></script>
	<script src="layui/layui.js"></script>
	<script>
      var localip = '${localip}';
      var i = 600;
     // document.all.marqueeContent.stop();
      Timeout();
		function Timeout() {
			if (i > 0) {
				i--;
				setTimeout(function() {
					Timeout();
				}, 1000);
			} else {
				setEncoderState(5);
			}
		}

		var list = "[" + "${list}" + "]";//.split(";")
		var plist = eval(list);

		//打开自动播放
		var height = $('.artical').height();
		var p = 0;
		$('.nBtn').click(function() {
			if (height > 400 * (p + 1)) {
				p++;
				$('.artical').css('top', (-390 * p) + 'px');
			}
		});
		$('.pBtn').click(function() {
			if (p > 0) {
				p--;
				$('.artical').css('top', (-390 * p) + 'px');
			}
		});

		layui.use(
		[ 'layer', 'form', 'element' ],
		function() {
			var layer = layui.layer, form = layui.form(), element = layui
					.element();

			//你的代码都应该写在这里面
			var layer = layui.layer;
			var form = layui.form();

			$('#direction').click(
				function() {
					layer.open({
						type : 1,
						title : 0,
						closeBtn : 0,
						skin : 'layui-layer-demo', //样式类名
						shadeClose : true,//开启遮罩关闭
						skin : 'yourclass',
						area : [ '240px',
								'200px' ], //宽高
						content : '<ul class="ul"><li class="li1" onclick="changeSize(\'p2\');"></li><li class="li2" onclick="changeSize(\'p1\');"></li><li class="li3" onclick="changeSize(\'t1\');"></li><li class="li4" onclick="changeSize(\'t2\');"></li></ul>'
					});
				});

			$(document).on('click', '.openUl li', function() {
				$('.selctNum').html($(this).html());
			});

		});

		var isread = false;
		$('.start-btn').click(function() {
			if ('${user.cardno}' == undefined
					|| '${user.cardno}' == '') {
				layer.msg("超时退出，请重新刷卡登录！",{icon : 0,time : 3000},
					function() {
						window.location.href = '<%=basePath%>declaimer/first?devicecode=${devicecode}&guid=${user.guid}';
				});
				return;
			}
			if(isread){
				return;
			}
	        $.ajax({
	          async : false,
	          cache : false,
	          type : 'post',
	          dataType : "json",
	          url :  'declaimer/readtype?cardno=${user.cardno}&guid=${user.guid}&materialid=${material.id }&devicecode=${devicecode }',// 请求的action路径
	          error : function(XMLHttpRequest, textStatus, errorThrown) {
	            layer.msg("请求失败！");
	          },
	          success : function(data) {
	            if(data.state=="1"){
	              setEncoderState(1);
	              seconds = data.message;
	              setLastTime();
	              layer.msg("朗读开始！",{icon:1});
	              $(".start-btn").hide();
	              isread = true;
	              i = 1000;
	            }else{
	              layer.msg(data.message,{icon:0});
	            }
	          }
	        });
      });
		var seconds = 0;
		function setLastTime(){
			var second = seconds%60;
			var minute = (seconds-second)/60;
			if(minute<10)
				$("#minute").html("0"+minute);
			else
				$("#minute").html(minute);
			if(second<10)
				$("#second").html("0"+second);
			else
				$("#second").html(second);
			if(seconds>0){
				seconds--;
				setTimeout(function() { 
					setLastTime();
				},1000);
			}else{
				setEncoderState(5);
			}
		}
      
		$(".over-btn").click(function() {
			if (isread) {
				setEncoderState(5);
			} else {
				layer.confirm('是否退出朗读？', {
					btn : [ '确定', '取消' ]
				//按钮
				}, function() {
					setEncoderState(5);
				}, function() {
				});
			}
		});
		//保存当前播放器以便操作
		var thePlayer = jwplayer('vd').setup({
			'flashplayer' : 'jwplayer.flash.swf',
			'file' : 'rtmp://' + localip + '/live/main',
			//'file': '/upload/vedio/xsd/SM1/2.flv',
			'controlbar' : 'bottom',
			'width' : '100%',
			'height' : '100%',
			'controls' : false,//显示控件按钮
			'autostart' : 'false'//自动播放
		});
		var showlive = '${showlive}';
		function setLive() {
			setEncoderState(2);
		}
		if (showlive == '1') {
			$(".video").css("display", "inline");
			$(".video").css("float", "left");
			$(".video").css("width", "70%");
			$(".pictype").hide();
			$(".artical").css("width", "30%");
			setLive();
		} else {
			$(".video").hide();
			$(".pictype").show();
		}
		//处理录播设备返回数据
		function jsoncallback(data) {
			if (data == 'OK') {
				if (showlive == '1') {
					thePlayer.play(true);
				}
			} else if (data == '1') {

			} else {
				layer.msg("设备维护中，请下次再来！", {
					icon : 0
				});
			}
		}
		//切换摄像头特写或全景
		var Layoutname = "L";
		function changeVideo() {
			if (Layoutname == "L") {
				Layoutname = "R";
			} else {
				Layoutname = "L";
			}
			$.ajax({
				type : "get",
				dataType : 'jsonp',
				jsonp : "jsoncallback",
				url :  'http://'+localip+'/classes/common/Reading.php?method=setLayout&name='+Layoutname,// 请求的action路径
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					if (XMLHttpRequest.status != 200) {
						layer.msg("设备维护中，请下次再来！", {
							icon : 0
						});
					}
				},
				success : function(data) {

				}
			});
		}
		//设置录播状态 1-录播，2-直播，3-录制，4-暂停，5-结束
		function setEncoderState(state) {
			$.ajax({
				type : "get",
				dataType : 'jsonp',
				jsonp : "jsoncallback",
				timeout : 10000,
				url :  'http://'+localip+'/classes/common/Reading.php?method=setEncoderState&channelId=1&state='+state,// 请求的action路径
				error : function(XMLHttpRequest, textStatus,
						errorThrown) {
					if (XMLHttpRequest.status != 200) {
						layer.msg("设备维护中，请下次再来！", {
							icon : 0
						});
					}
				},
				success : function(data) {
				}
			});
			if (state == 5) {
				window.location.href = '<%=basePath%>declaimer/endread?guid=${user.guid}&devicecode=${devicecode }';
			}
		}

		//设置字幕速度
		var speed = $("marquee").attr("scrollamount");
		function changeSpeed(val) {
			var marquee = $('marquee').html();
			setTimeout(
					function() {
						if (val > 0) {
							speed++;
							if (speed > 6) {
								speed = 10;
							}
							$("marquee").attr("scrollamount", speed).html(
									marquee);
							//回流DOM 重新添加marquee内容
						 	/* $(".articalMain")
									.html(
											'<marquee id="marquee" scrollamount="'
													+ speed
													+ '"  height="300px" direction="up"onmouseover=this.stop() onmouseout=this.start()>'
													+ marquee + '</marquee>')  */
						} else {
							speed--;
							if (speed <= 0) {
								speed = 1;
							}
							$("marquee").attr("scrollamount", speed)
							/*  $(".articalMain")
									.html(
											'<marquee id="marquee" scrollamount="'
													+ speed
													+ '"  height="300px"  direction="up"onmouseover=this.stop() onmouseout=this.start()>'
													+ marquee + '</marquee>');  */
						}
					}, 200);
		}
		
		
		function stopbtn(obj){
			if($(obj).attr("class")=="speed-btn stop-btn"){
				$(obj).removeClass("stop-btn");
				$(obj).addClass("stop-btn2");
				document.getElementById('marquee').stop();
			}else{
				$(obj).removeClass("stop-btn2");
				$(obj).addClass("stop-btn");
				document.getElementById('marquee').start();
			}
			
		};
		
		
		//设置摄像头角度和焦距
		function changeSize(v) {
			p = 0, t = 0, z = 0, pid = 3;
			if (!isread) {
				i = 120;
			}
			if (v == 'p1') {
				p = 10;
			} else if (v == 'p2') {
				p = -10;
			} else if (v == 't1') {
				t = 10;
			} else if (v == 't2') {
				t = -10;
			} else if (v == 'z1') {
				z = 2;
			} else if (v == 'z2') {
				z = -2;
			}
			$.ajax({
				type : "get",
				dataType : 'jsonp',
				jsonp : "jsoncallback",
				url : 'http://' + localip+ '/classes/common/Reading.php?method=ptzRlt&id=' + pid + '&p=' + p + '&t=' + t + '&z=' + z,// 请求的action路径
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					if (XMLHttpRequest.status != 200) {
						layer.msg("设备维护中，请下次再来！", {
							icon : 0
						});
					}
				},
				success : function(data) {

				}
			});
		}
	</script>
	<script src="js/script.js"></script>
	
	
	
</body>
</html>